*{padding: 0;margin: 0;}
        .box{
            width: 450px;
            height: 600px;
            border: 1px solid black;
            margin: 50px;
            position: relative;
        }
        .box .show{
            width: 450px;
            height: 450px;
            border-bottom: 1px solid #333;
            position: relative;
            cursor: none;
        }
        .box > .show> .mask{
            width: 200px;
            height: 200px;
            background-color: rgba(196, 209, 169, 0.5);
            position: absolute;
            left: 0;
            top: 0;
            /* 我不当做事件目标 */
            pointer-events: none;
            display: none;
        }
        .box > .show> .mask.active{
            display: block;
        }
        img{
            width: 100%;
            height: 100%;
            display: block;
        }
        .box>.enlarge{
            width: 600px;
            height: 600px;
            border:1px solid firebrick;
            position: absolute;
            left: 110%;
            top: 0;
            background: url(./img/huawei2.jpg) no-repeat;
            background-size: 800px 800px;
            background-position: 0 0;
            display: none;
        }
        .box>.enlarge.active{
            display: block;
        }
        .box > .list {
            width: 100%;
            height: 109px;
            padding: 26px  20px 14px 20px;
            margin-top: 15px;
            
        }
        .list> p {

            height: 54px;
            width: 54px;
            float: left;
            margin-right: 30px;
            border: 1px solid transparent;
            cursor: pointer;
        }
        .list >p.active{
            border: 1px solid gray;
        }